<template>
  <div class="contain" >
    <div class="contain_item" v-for="(item,index) in notice"   v-if="notice.length != 0">
      <div class="contain_image-wrap">
        <img class="contain_image" :src="item.thumbnail"></img>
      </div>
      <div class="yellowcode">
        <span class="yellowcode_text">{{item.title}}</span>
      </div>
      <div class="quickLook">
        <span class="quickLook_text">{{item.subTitle}}</span>
      </div>
    </div>
    <div  v-if="notice.length == 0">
      <noData></noData>
    </div>
  </div>
</template>

<script>

import {
  list,
  tag
} from '@/api/article';
import { mapGetters } from 'vuex'


import noData from "@/views/designer/components/product/components/noData";
export default {
  name: "graphicList.vue",
  data() {
    return {
      notice:[],
      tagIds: '',
      pageNum: 1,
      pageSize: 5,
    }
  },
  components:{
    noData
  },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  created() {
    this.initQuestion()
  },
  methods: {
    initQuestion () {
      let params={
        articleType:0,
        mchId: this.mchId,
        sortField:"id",
        sortType:'desc',
        pageNum: 1,
        pageSize: 5,
      }
      list(params).then(res => {
        if (res.data.data.length>0) {
          this.notice  = res.data.data
        }
      })
      // let params = {
      //   'mchId': this.mchId,
      //   'type': 0,
      // }
      // tag(params).then(res => {
      //   res.data.data.forEach(item => {
      //     if (item.name == '视频') {
      //       this.tagIds = item.id
      //       let params={
      //         articleType:0,
      //         mchId: this.mchId,
      //         tagIds: this.tagIds,
      //         sortField:"id",
      //         sortType:'desc'
      //       }
      //       list(params).then(res => {
      //         if (res.data.data.length>0) {
      //           this.notice  = res.data.data
      //         }
      //       })
      //     }
      //   })
      // })
    },
  }
}
</script>

<style scoped>
.contain{
  background-color: white;
  overflow: hidden;
  margin-top: 20px;
  margin-bottom: 20px;
}
.contain_item{
  background-color: white;
  margin-left: 15px;
  width: 345px;
  border-radius: 5px;
}
.contain_image{
  width: 345px;
  height: 145px;
}
.yellowcode{
  display: block;
  margin-top: 15px;
  width: 345px;
}
.yellowcode_text{
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 10px;
  letter-spacing: 2px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow:ellipsis;
}
.quickLook{
  display: block;
  margin-top: 15px;
  width: 345px;
}
.quickLook_text{
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  color: #b6b4b5;
  font-size: 13px;
  letter-spacing: 3px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow:ellipsis;
}
</style>




